<!--
 * @author: 十一
 * @since: 2024-08-27
 * permissions-manage.vue
 * @desc: new page
-->
<template>
  <!-- <a-card> 菜单管理（待完善） 🍓🍇🍈🍉 </a-card> -->
  <a-card>
    <icon-font type="icon-RectangleCopy68" />
   <component is="WifiOutlined" style="font-size: 24px; margin: 10px;" />
   <component is="WindowsOutlined" style="font-size: 24px; margin: 10px;" />
    <!-- <a-icon type="user" /> -->
    <!-- <a-icon type="WifiOutlined" /> -->
    <!-- <div v-for="iconKey in iconKeys" :key="iconKey"> -->
      <!-- <Icon :type="iconKey" /> {{ iconKey }} -->
      <!-- <a-icon :component="iconKey" />{{ iconKey }} -->
      <!-- <Icon :type="iconMap[iconKey]" /> {{ iconKey }} -->
      <!-- <Icon :component="iconMap[iconKey]" /> -->
    <!-- </div> -->
    <!-- <div class="icon-gallery flex flex-wrap">
    <div v-for="(icon, name) in icons" :key="name" class="icon-item flex items-center flex-col">
      <component :is="icon" style="font-size: 24px; margin: 10px;" />
      <div>{{ name }}</div>
    </div>
  </div> -->
  <a-row >
    <a-col :span="4"  v-for="(icon, name) in icons" :key="name" >
     <div class="icon-item flex items-center flex-col">
      <component :is="icon" style="font-size: 24px; margin: 10px;" />
      <div>{{ name }}</div>
     </div>
    </a-col>
  </a-row>
  </a-card>
</template>

<script lang="ts" setup>
import * as AntIcons from '@ant-design/icons-vue';
// 准备所有图标的映射
const icons = AntIcons;

console.log(icons)
// 将图标映射到 Vue 组件
const iconComponents = Object.fromEntries(
  Object.entries(icons).map(([name, component]) => [name, component])
);
</script>

<style scoped>
.icon-item {
  border: 1px solid #ccc;
  margin: 5px;
}
</style>
